<template>
  <div class="order">
    <div class="allOrder">
      <router-link :to='{name:"myinfo"}'>
        <a href="#" class="a1">我的订单</a>
      </router-link>
      <router-link :to='{name:"myinfo"}'>
        <a href="#" class="a2">全部订单&gt;</a>
      </router-link>
    </div>
    <div class="orderDetails">
      <ul>
        <router-link :to='{name:"myinfo"}'>
          <li>
            <p>
              <a href="#">
                <i class="iconfont icon-daifukuan"></i>
              </a>
            </p>
            <p>
              <a href="#">待付款</a>
            </p>
          </li>
        </router-link>
        <router-link :to='{name:"myinfo"}'>
          <li>
            <p>
              <a href="#">
                <i class="iconfont icon-daishouhuo"></i>
              </a>
            </p>
            <p>
              <a href="#">待收货</a>
            </p>
          </li>
        </router-link>
        <router-link :to='{name:"myinfo"}'>
          <li>
            <p>
              <a href="#">
                <i class="iconfont icon-31tianmaojiadian"></i>
              </a>
            </p>

            <p>
              <a href="#">退换修</a>
            </p>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {}
};
</script>

<style lang='scss' scoped>
$appwidth: 375;

@function pxtovw($p) {
  @return (100 / $appwidth * $p) * 1vw;
}
.order {
  position: absolute;
  top: pxtovw(80);
  width: 100%;
  height: pxtovw(135);
  background: white;
  .allOrder {
    width: 100%;
    height: pxtovw(50);
    border-bottom: 1px solid #ccc;
    .a1 {
      display: inline-block;
      position: absolute;
      line-height: pxtovw(50);
      left: pxtovw(20);
      font-size: pxtovw(14);
      color: #333;
      text-decoration: none;
    }
    .a2 {
      display: inline-block;
      text-decoration: none;

      position: absolute;
      line-height: pxtovw(50);
      right: pxtovw(20);
      font-size: pxtovw(12);
      color: #676;
    }
  }
  .orderDetails {
    width: 100%;
    height: pxtovw(85);
    ul {
      height: pxtovw(85);

      display: flex;
      justify-content: space-around;
      text-align: center;
      align-items: center;
      li {
        font-size: pxtovw(14);
        color: #666;
        a {
          display: inline-block;
          text-decoration: none;
          color: #666;
          i {
            font-size: pxtovw(16);
          }
        }
      }
    }
  }
}
</style>
